<template>
    <div class="team__wrapper">
        <div class="row g-4">
            <div class="col-lg-6 col-sm-12" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                <div class="team__header">
                    <h2 class="style2-h2">Meet Our Expert</h2>
                    <p class="style2">Clarity gives you the blocks & components you needto create a truly
                        professional website,
                        landing page or admin panel for your saas components you needto create a truly</p>
                    <nuxt-link to="/mentors" class="trk-btn trk-btn--rounded trk-btn--secondary4">Explore More
                        <span><span><i class="fa-solid fa-arrow-right"></i></span></span></nuxt-link>
                </div>
            </div>
            <div v-for="(item, idx) in mentors.slice(0, 6)" :key="idx" class="col-lg-3 col-sm-6">
                <div class="team__item" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
                    <div class="team__item-inner">
                        <div class="team__item-thumb team__item-thumb--style1">
                            <img :src="item.avatar" alt="Team Image">
                        </div>
                        <div class="team__item-content team__item-content--style1">
                            <div class="team__item-author">
                                <h6><nuxt-link to="/mentor-details">{{ item.name }}</nuxt-link> </h6>
                                <p>{{ item.role }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        mentors: {
            type: Array,
            default: () => [],
        },
    }
}
</script>